{% extends 'base.html' %}

{% block title %}Verify Certificate — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  .verify-stamp {
    width: 132px; height: 132px; border-radius: 50%;
    border: 5px solid #059669; color: #059669;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    transform: rotate(-12deg);
    background: rgba(5, 150, 105, .06);
    box-shadow: inset 0 0 0 3px rgba(5, 150, 105, .25);
  }
  .verify-stamp .stamp-main { font-size: 1.05rem; line-height: 1; }
  .verify-stamp .stamp-sub { font-size: .65rem; letter-spacing: .14em; margin-top: .35rem; opacity: .85; }
  .fake-panel {
    background: linear-gradient(135deg, #fef2f2, #fff1f2);
    border: 1px solid #fecaca;
  }
</style>
{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container" style="max-width:760px;">
    <div class="text-center mb-4">
      <i class="bi bi-shield-check display-5 text-primary"></i>
      <h2 class="fw-bold mt-2">Certificate verification</h2>
      <p class="text-muted">Enter the unique Certificate ID printed on the certificate to confirm authenticity.</p>
    </div>

    <div class="card border-0 shadow-sm rounded-4 mb-4">
      <div class="card-body p-4">
        <form method="post" novalidate>
          {% csrf_token %}
          <label class="form-label fw-semibold">Certificate ID / Verification code</label>
          {{ form.code }}
          {% if form.code.errors %}<div class="text-danger small mt-1">{{ form.code.errors.0 }}</div>{% endif %}
          <div class="form-text">Format: CERT-XXXX-XXXX (14 characters max)</div>
          <button type="submit" class="btn btn-primary w-100 mt-3 fw-semibold">
            <i class="bi bi-search me-1"></i>Verify certificate
          </button>
        </form>
      </div>
    </div>

    {% if searched %}
      {% if certificate and certificate.is_valid %}
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
          <div class="card-body p-4 p-md-5">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-4 mb-4">
              <div>
                <div class="text-success fw-bold mb-1">
                  <i class="bi bi-check-circle-fill me-1"></i>Verified authentic certificate
                </div>
                <div class="text-muted small">
                  This certificate was issued by <strong>{{ site_settings.institute_name }}</strong>.
                </div>
              </div>
              <div class="verify-stamp" aria-label="Verified stamp">
                <div class="stamp-main">Verified</div>
                <div class="stamp-sub">Authentic</div>
              </div>
            </div>
            <div class="row g-3">
              <div class="col-md-6">
                <div class="text-muted small">Student name</div>
                <div class="fw-bold fs-5">{{ certificate.recipient_name }}</div>
              </div>
              <div class="col-md-6">
                <div class="text-muted small">Course / certification</div>
                <div class="fw-bold fs-5">{{ certificate.program_title }}</div>
              </div>
              <div class="col-md-6">
                <div class="text-muted small">Issue date</div>
                <div class="fw-bold">{{ certificate.issued_at|date:"d M Y" }}</div>
              </div>
              <div class="col-md-6">
                <div class="text-muted small">Certificate ID</div>
                <div class="fw-bold font-monospace">{{ certificate.verification_code }}</div>
              </div>
              <div class="col-md-6">
                <div class="text-muted small">Score</div>
                <div class="fw-bold">{{ certificate.score_percent|floatformat:1 }}%</div>
              </div>
            </div>
            <a href="{% url 'certifications:certificate_soft' certificate.verification_code %}" class="btn btn-outline-primary btn-sm mt-4">
              View soft-copy certificate
            </a>
          </div>
        </div>
      {% elif certificate and certificate.is_revoked %}
        <div class="alert alert-danger rounded-4">
          <strong><i class="bi bi-x-octagon-fill me-1"></i>Revoked certificate.</strong>
          This code exists but the certificate has been revoked
          {% if certificate.revoke_reason %} ({{ certificate.revoke_reason }}){% endif %}.
          It is <strong>not valid</strong> for official use.
        </div>
      {% else %}
        <div class="card border-0 shadow-sm rounded-4 fake-panel">
          <div class="card-body p-4 p-md-5 text-center">
            <div class="display-6 text-danger mb-2"><i class="bi bi-shield-x"></i></div>
            <h3 class="fw-bold text-danger h4 mb-2">Fake certificate — not issued by {{ site_settings.institute_name }}</h3>
            <p class="mb-0 text-danger-emphasis">
              No authentic certificate matches this Certificate ID.
              The details you entered are <strong>not</strong> recognized as an official certificate from {{ site_settings.institute_name }}.
            </p>
          </div>
        </div>
      {% endif %}
    {% endif %}
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  const input = document.getElementById('{{ form.code.id_for_label }}');
  if (!input) return;

  function formatCertCode(raw) {
    // Keep letters/digits only, uppercase, then shape as CERT-XXXX-XXXX
    let chars = raw.toUpperCase().replace(/[^A-Z0-9]/g, '');
    if (chars.startsWith('CERT')) {
      chars = chars.slice(4);
    }
    chars = chars.slice(0, 8);
    let out = 'CERT';
    if (chars.length > 0) out += '-' + chars.slice(0, 4);
    if (chars.length > 4) out += '-' + chars.slice(4, 8);
    return out.slice(0, 14);
  }

  input.setAttribute('maxlength', '14');
  input.addEventListener('input', function () {
    const start = this.selectionStart;
    const prev = this.value;
    this.value = formatCertCode(this.value);
    // Keep cursor reasonable when reformatting
    if (this.value.length < prev.length) {
      this.setSelectionRange(this.value.length, this.value.length);
    } else {
      this.setSelectionRange(Math.min(start + (this.value.length - prev.length), this.value.length), Math.min(start + (this.value.length - prev.length), this.value.length));
    }
  });
  input.addEventListener('paste', function (e) {
    e.preventDefault();
    const text = (e.clipboardData || window.clipboardData).getData('text') || '';
    this.value = formatCertCode(text);
  });
})();
</script>
{% endblock %}